<template>
	<app-layout>
		<!-- <movable-area class="movable" :style="{height: `calc(100% - ${BotHeight}rpx)`}">
			<movable-view @click="jump('/pages/store/transfer/transfer')" class="movable-item" direction="all" x="750"
				y="420" :inertia="true">
				<image :lazy-load="true" class="quick"
					:src="imgprefix + '/web/uploads/tasklist/valueflo.jpg?time=' + time"></image>
			</movable-view>
		</movable-area> -->
		<view class="besuc-app">
			<view class="">
				<app-navigation-icon navHeight="156" iconRadius="16rpx" navMargin="20rpx auto" :navs="navs"
					background="#f7f7f7" :scroll="true" columns="5" :rows="2">
				</app-navigation-icon>
			</view>
			<view v-if="banners.length > 0" style="width: 686rpx;margin: 20rpx auto 32rpx;border-radius: 32rpx;">
				<app-swiper :list="banners" borderRadius="32" mode="rect" name="icon_url" :height="242"
					:autoplay="true">
				</app-swiper>
			</view>
			<view class="today" @click="jump(turnover[3].url)">
				<image :src="turnover[3].icon_url" class="image" mode="widthFix" :lazy-load="true"></image>
			</view>
			<view class="today" @click="toapply(applyimg[0].url)">
				<image :src="applyimg[0].icon_url" class="image" mode="widthFix" :lazy-load="true"></image>
			</view>
			<view class="search-area">
				<view class="search main-center" @click="toSearch">
					<image class="icon-search" src="/static/image/icon/icon-search.png"></image>
					<text>搜朋友的珠宝店</text>
				</view>
			</view>
			<view class="beturnstore" v-for="(item,index) in list" :key="index" @click="jumptostore(item)">
				<view class="beturnimage">
					<image class="image" :src="item.user.userInfo.avatar"></image>
				</view>
				<view class="beturntext">
					{{item.name}}的珠宝店
				</view>
			</view>
		</view>
		<!-- 返回顶部 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
			<image @click="backTop" class="quick-btn" src="/static/image/icon/back-top.png"></image>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import appNavigationIcon from '../../../components/page-component/app-navigation-icon/app-navigation-icon.vue'
	import appSwiper from '../../../components/page-component/app-swiper/app-swiper.vue'

	export default {
		name: 'user-center',
		data() {
			return {
				type: '',
				navs: [],
				banners: [],
				turnover: [],

				list: [],
				page: 1,
				limit: 20,
				page_count: 1,

				issuclogin: false,
				imgprefix: this.$siteInfo.imgroot,
				// 10.26
				time: new Date().getTime(),
				applyimg: [],
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,

				// 10.22 判断是否可以使用getUserPro
				canUserProfile: getApp().globalData.canIUseGetUserProfile
			}
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		components: {
			appNavigationIcon,
			appSwiper
		},
		onLoad() {
			this.loadList()
			this.allReq(5)
			this.allReq(104)
			this.allReq(669)
			this.allReq(742)
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		// 9.29 离开页面改变 弹窗显示状态
		onUnload() {
			getApp().globalData.firstapplet = false
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: '挣钱养家',
				path: '/pages/user-center/jewstore/jewstore',
				params: {

				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: '挣钱养家',
				query: {

				}
			});
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				this.loadList()
			} else {
				const listSt = this.$storage.getStorageSync('storeList')
				if (listSt) {
					this.list = this.list.concat(listSt)
				} else {
					this.page = 1
					this.loadList()
				}
			}
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			isLogin() {
				return this.$user.isLogin();
			},
			...mapState({
				userInfo: state => state.user.info
			}),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme'
			}),
			...mapGetters('iPhoneX', {
				BotHeight: 'getBotHeight',
			})
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
		},
		methods: {
			toSearch() {
				uni.navigateTo({
					url: `/pages/bepartner/search`
				})
			},
			moveStop() {

			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(item) {
				if (item == '/' || item == 'javascript:;') {
					return
				}
				if (item == '/pages/index/index' || item.indexOf('/pages/gospeed/index') != -1 || item ==
					'/pages/sixty/index' || item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: item
					})
					return;
				}
				uni.navigateTo({
					url: item
				})
			},
			jumptostore(item) {
				uni.navigateTo({
					url: '/pages/store/mine/mine?vid=' + item.id
				})
			},
			toapply(item) {
				if (this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null) {
					this.$store.dispatch('user/accessToken');
				} else {
					uni.navigateTo({
						url: item
					});
				}
			},
			callLogin() {
				this.$store.dispatch('user/accessToken');
			},
			allReq(pid) {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: pid,
						status: 1
					}
				}).then((res) => {
					if (pid == 5) {
						this.banners = res.data.list
					} else if (pid == 104) {
						this.turnover = res.data.list
					} else if (pid == 669) {
						this.navs = res.data.list
					} else if (pid == 742) {
						this.applyimg = res.data.list
					}
				}).catch(() => {

				})
			},
			loadList() {
				this.$request({
					url: this.$api.apply.list,
					data: {
						page: this.page,
						limit: 20,
						review_status: 1
					}
				}).then((res) => {
					this.list = this.list.concat(res.data.list)
					this.page_count = res.data.pagination.page_count
					this.$storage.setStorageSync('storeList', this.list)
				}).catch(err => {
					// console.log(err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// 10.26 弹窗
	.movable {
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		z-index: 1001;
		width: 750rpx;
		height: 100%;

		.movable-item {
			pointer-events: auto;
			width: 200rpx;
			height: 200rpx;
		}

		.quick {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.besuc-app {
		margin: 24rpx 0;
	}

	.search-area {
		height: #{88rpx};
		line-height: #{88rpx};
		width: 100%;
		background-color: #f7f7f7;
		padding: #{12rpx} #{24rpx};

		.search {
			height: #{58rpx};
			line-height: #{58rpx};
			border-radius: #{32rpx};
			background-color: #f7f7f7;
			color: #c0c0c0;
			font-size:#{26rpx};
			box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.1);

			&.be-search {
				color: #353535;
				padding-left: 32rpx;

				.icon-search {
					margin-right: 10rpx;
				}
			}

			.icon-search {
				height: #{24rpx};
				width: #{24rpx};
				margin-top: #{20rpx};

				&+text {
					color: #b2b2b2;
					margin:0 #{8rpx};
				}
			}
		}
	}

	.today {
		width: 686rpx;
		margin: 20rpx auto;
		box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
		border-radius: 32rpx;
		display: flex;
		align-items: center;

		.image {
			width: 100%;
			height: 100%;
		}
	}

	.open-store {
		text-align: center;
		display: flex;
		/* flex-wrap: wrap; */
		flex-direction: column;
		align-items: center;
	}

	.subimgs {
		width: 240rpx;
		height: 240rpx;

		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.suc-shop {
		font-size: 48rpx;
		margin-top: 32rpx;
	}

	.check-shop {
		padding: 24rpx 36rpx;
		background: #342B2A;
		color: #fff;
		width: 300rpx;
		text-align: center;
		border-radius: 16rpx;
		margin-top: 24rpx;
	}

	.app-my-service {
		width: #{702rpx};
		border-radius: #{16rpx};
		margin: #{24rpx} auto;
		box-shadow: 0 0 #{8rpx} rgba(0, 0, 0, .05);
		background: #fff;

		.title {
			padding: #{32rpx} #{32rpx} #{16rpx};
			border-bottom: 2rpx solid #f4f3f3;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
		}

		.list {
			.item {
				.icon {
					width: #{56rpx};
					height: #{56rpx};
					display: block;
				}

				.arrow {
					width: #{12rpx};
					height: #{22rpx};
				}
			}
		}

		.list.row {
			.item-container {
				padding: #{20rpx} #{32rpx};
			}

			.icon {
				margin-right: #{16rpx};
			}
		}

		.list.grid {
			.item {
				width: 25%;

				.icon {
					margin-bottom: #{28rpx};
				}

				.name {
					padding: 0 #{12rpx};
					font-size: $uni-font-size-weak-one;
					color: $uni-general-color-one;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.item-container {
				padding: #{24rpx} 0;
			}
		}
	}

	.u-foot-box {
		position: relative;
		height: 104upx;
	}

	.u-icon {
		margin-top: 44upx;
		width: 40upx;
		height: 40upx;
		margin-right: 17upx;
	}

	.u-foot-item {
		font-size: #{26rpx};
		color: #666666;
		padding-top: #{14rpx};
		width: 50%;
	}

	.u-foot-info {
		text-align: center;
	}

	.u-foot-num {
		font-size: 32upx;
		margin-bottom: 10upx;
	}

	.u-line {
		height: 40upx;
		width: 2upx;
		background-color: #666666;
		position: absolute;
		top: 45upx;
		left: 50%;
		margin-left: -2upx;
	}

	.bepartner {
		width: 686rpx;
		height: 136rpx;
		margin: 20rpx auto;
		position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.bebg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.bebg image {
		height: 136rpx;
		width: 136rpx;
	}

	.beimg {
		width: 96rpx;
		height: 96rpx;
		position: absolute;
		left: 106rpx;
		top: 20rpx;
	}

	.beimg image {
		width: 96rpx;
		height: 96rpx;
	}

	.befont {
		position: absolute;
		left: 234rpx;
		line-height: 136rpx;
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}

	// 小店循环
	.beturnstore {
		background: #FFFFFF;
		width: 686rpx;
		height: 128rpx;
		border-radius: 16rpx;
		margin: 20rpx auto;
		color: #333333;
		display: flex;
		align-items: center;
		padding: 0 48rpx;
		box-shadow: 0px 5rpx 10rpx rgba(57, 57, 57, 0.1);
	}

	.beturnimage {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturnimage .image {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturntext {
		font-size: 28rpx;
		color: #333333;
		padding-left: 32rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
